<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ScorpioPackageTool</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="element/index.css">
  </head>
  <body>
  <div id="app" style="height: 100%;">
    <el-container style="height: 100%; border: 1px solid #eee" id="mainBack">
      <el-header style="min-width: 600px; height: 100px; margin: 0px;">
        <el-tabs type="card">
          <el-tab-pane label="常用">
            <el-button type="primary" icon="el-icon-document" v-on:click="OnClickOpenFile()">打开文件</el-button>
          </el-tab-pane>
          <el-tab-pane label="系统日志">
            <el-input v-model="logTag" placeholder="日志TAG" style="width: 120px;"></el-input>
            <el-button type="primary" icon="el-icon-tickets" v-on:click="OnClickOpenLog()">Android日志</el-button>
          </el-tab-pane>
        </el-tabs>
      </el-header>
      <el-tabs v-model="activeName" style="margin: 10px 10px;" @tab-click="handleTabClick">
        <el-tab-pane label="应用列表" name="list"></el-tab-pane>
        <el-tab-pane label="应用信息" name="app" v-if="fileName != ''"></el-tab-pane>
      </el-tabs>
      <el-container v-show="activeName == 'list'">
        <el-table :data="fileList" style="width: 100%" border="" >
          <el-table-column prop="name" label="名称" width="180"></el-table-column>
          <el-table-column prop="label" label="应用名" width="150"></el-table-column>
          <el-table-column prop="bundle" label="Bundle Identifier" width="180"></el-table-column>
          <el-table-column prop="versionName" label="版本" width="80"></el-table-column>
          <el-table-column prop="versionCode" label="版本" width="60"></el-table-column>
          <el-table-column prop="sdkVersion" :formatter="formatSdkVersion" label="最低支持版本" width="110"></el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="data">
              <el-button size="mini" @click="handleOpenFile(data.row)">打开</el-button>
              <el-button size="mini" type="danger" @click="handleDeleteFile(data.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      </el-container>
      <el-container v-show="activeName == 'app'">
        <el-aside width="220px" style="background-color: rgb(238, 241, 246)">
          <el-tree :data="treeData" :props="defaultProps" empty-text="正在加载文件列表..." @node-click="OnClickTree"></el-tree>
        </el-aside>
        <el-container>
          <el-header style="font-size: 14px;min-width: 800px;">
            <img v-bind:src="iconUrl" style="float: left; margin-right: 5px;"/>
            <div style="float: left;">
                <span>应用名称 : {{ fileInfo.label }}</span>&nbsp;&nbsp;
                <span>应用标识 : {{ fileInfo.bundle }}</span>
                <br/>
                <span>版本名称 : {{ fileInfo.versionName }}</span>&nbsp;&nbsp;
                <span>版本号 : {{ fileInfo.versionCode }}</span>&nbsp;&nbsp;
                <br/>
                <span>最小支持版本 : {{ fileInfo.sdkVersion }}</span>
            </div>
            <el-button-group>
              <el-button type="primary" v-on:click="OnClickOpenSource()">打开源码</el-button>
              <el-button type="primary" v-on:click="OnClickOpenFolder()">打开目录</el-button>
            </el-button-group>
          </el-header>
          <el-main>
            <img style="background-color: white" v-bind:src="imageUrl"/>
            <pre><code style="color: black; font-size: 14px;">{{ mainEditor }}</code></pre>
          </el-main>
          <div style="height: 45px; margin: 0px 20px;">
            <el-switch v-model="autoRoll" active-color="#13ce66" inactive-color="#ff4949" inactive-text="" active-text=""></el-switch>
            <el-button icon="el-icon-delete" circle v-on:click="OnClickClearLog()"></el-button>
          </div>
          <el-footer style="height: 30%;overflow: auto;font-size: 14px;"><pre id="logoutput"></pre></el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
  </body>
  <script src="element/vue.js"></script>
  <script src="element/index.js"></script>
  <script>
    require("./renderer-process/common.js");
    require("./renderer-process/renderer.js")
  </script>
  <style scoped>
    [v-cloak] {
      display: none;
    }
    html, body{
      height: 100%;
      margin: 0;
    }
  </style>
</html>
